<!-- template只是一个区域标签，并不是HTML元素 -->
<template>
	<h2>根组件</h2>
	<!-- v-html和v-text -->
	<!-- 使用vue指令或Mustache模板语法绑定数据后，元素都具备响应式特性 -->
	<div>{{ str }}</div>
	<div v-text="str"></div>
	<!-- 会解析数据内容中的html文本成网页标签 -->
	<div v-html="str"></div>
	<!-- ================== -->
	<!-- v-bind -->
	<a v-bind:href="x" :title="x">属性绑定指令</a>
	<br />
	<!-- v-on -->
	<button v-on:click="fun">事件绑定指令</button>
	<br />
	<button @click="fun">事件绑定指令</button>
</template>

<script setup>
import { ref } from 'vue'
const str = ref("<a href='https://www.baidu.com'>百度首页</a>")
const x = ref('https://www.baidu.com')
setTimeout(() => {
	x.value = 'https://www.taobao.com'
}, 3000)
const fun = () => { alert('事件绑定指令')  }
</script>

<style scoped>
/* 只写当前组件存在的元素的样式 */
h2 {
	color: red;
}
</style>